<template>
  <div class="tp">
    <Header />

    <Content>
      <div class="cp">
        <div class="card">
          <div class="c-title mt-2"> 基本信息 </div>

          <div class="line"></div>

          <div class="c-body">
            <a-row>
              <a-col span="2" class="f-label"> 盘点单号 </a-col>
              <a-col span="6" class="f-value">
                {{ detail.stockCheckCode }}
              </a-col>

              <a-col span="2" class="f-label"> 盘点人 </a-col>
              <a-col span="6" class="f-value">
                {{ detail.createBy }}
              </a-col>

              <a-col span="2" class="f-label"> 盘点时间 </a-col>
              <a-col span="6" class="f-value">
                {{ detail.createTime }}
              </a-col>
            </a-row>
          </div>
        </div>

        <div class="card" style="margin-top: 20px">
          <div class="c-title"> 库存明细 </div>

          <div class="line"></div>

          <div class="c-body">
            <BasicTable @register="registerTable" :resizeHeightOffset="44" style="margin: 0 -2px" />
          </div>
        </div>
      </div>
    </Content>
  </div>
</template>

<script setup>
  import { defineOptions, h, onMounted, ref } from 'vue';

  import { BasicTable, useTable } from '@/components/Table';

  import Header from '@/widget/header.vue';
  import Content from '@/widget/content.vue';
  import { useRoute } from 'vue-router';
  import ProImgCell from '@/widget/pro-img-cell.vue';
  import { PAGE } from '@/api/http.js';
  import { Flex } from 'ant-design-vue';

  import profit1 from '@/assets/img/profit-1.png';
  import profit0 from '@/assets/img/profit-0.png';

  defineOptions({ name: 'StockReviewDetail' });

  const route = useRoute();

  const { content = null } = route.query;
  const detail = ref({});

  onMounted(() => {
    loadData();
  });

  async function loadData() {
    detail.value = content ? JSON.parse(decodeURIComponent(atob(content))) ?? {} : {};
  }

  const [registerTable] = useTable({
    api: PAGE('/product/stockCountDetailPages'),
    beforeFetch: (arg) => {
      const { stockCheckCode } = detail.value;
      return Object.assign(arg, { stockCheckCode });
    },
    columns: [
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        ellipsis: false,
        width: 290,
        customRender: ({ value: title, record }) =>
          h(ProImgCell, { src: record.goodsImage, title }),
      },

      {
        title: '商品分类',
        dataIndex: 'libCategoryName',
        ellipsis: false,
      },
      {
        title: '规格',
        dataIndex: 'specs',
        ellipsis: false,
      },

      {
        title: '库存数量',
        dataIndex: 'num',
        ellipsis: false,
        customRender: ({ value, record }) => `${value || '0'}${record.saleUnit}`,
      },

      {
        title: '盘点数量',
        dataIndex: 'numNew',
        ellipsis: false,
        customRender: ({ value, record }) => `${value || '0'}${record.saleUnit}`,
      },

      {
        title: '差异数量',
        dataIndex: 'numDifference',
        ellipsis: false,
        customRender: ({ value, record }) => {
          let { saleUnit, isProfit } = record;
          saleUnit ||= '';
          value ||= 0;

          return h(Flex, { align: 'center', justify: 'center' }, [
            h('span', null, value === 0 ? '-' : `${value}${saleUnit}`),
            isProfit !== 2 &&
              h('img', {
                style: { width: '16px' },
                src: isProfit === 1 ? profit1 : profit0,
              }),
          ]);
        },
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'id',
  });
</script>
<style lang="less" scoped>
  .card {
    padding: 12px;

    .c-title {
      color: #333;
      font-size: 14px;
      font-weight: 500;
    }

    .line {
      margin: 0 -12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
    }

    .c-body {
      padding: 18px 12px;
    }
  }
</style>
